<template>
  <div class="KeepAlive">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'facilityId',
          {rules: [{ required: true, message: '请输入设备编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8">
            <a-form-item label="信息时间" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-range-picker
                style="width:100%"
                v-decorator="['rangeConfig', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>

          <a-col :span="8" style="text-align:right;">
            <a-button type="primary" @click="search()">查询</a-button>
            <a-button type="dashed" @click="listExport()">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
      >
        <!-- <span slot="customTitle">设备编号</span> -->
        <template slot="zhuangtai" slot-scope="text,record">
          <span>{{ record.isOnline==true? "设备上线":"设备离线" }}</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import moment from "moment";
const columns = [
  {
    title: "设备编号",
    dataIndex: "devCode",
    key: "facilityID",
    scopedSlots: { customRender: "facilityID" }
  },
  {
    title: "内容",
    dataIndex: "isOnline",
    scopedSlots: { customRender: "zhuangtai" }
  },
  {
    title: "信息时间",
    dataIndex: "messageTime",
    key: "informationTime"
  }
];
const data = [
  {
    key: "1"
  }
];
export default {
  name: "KeepAlive",
  data() {
    return {
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      form: this.$form.createForm(this),
      data: [],
      columns,
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 5,
        defaultCurrent: 5,
        current: 1,
        total: 500
      }
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.search();
    },

    //查询列表日志
    search() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/device/findDeviceOnlineLogPageListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          devCode: values.facilityId,
        })
        .then(response => {
          // console.log(response.data);
          this.data = response.data.data.list;
          this.pagination.current = response.data.data.pageNum;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.total = response.data.data.total;
        });
    },
    //导出列表日志
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/device/exportDeviceOnlineLog",
          {
            loginToken: this.$store.state.loginToken,
            devCode: values.facilityId
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response.data);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "保活信息表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.search();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.KeepAlive {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
</style>
